<template>
    <div class="home">
        <div id="head">
                    <h4>{{data[0].name}}</h4>
                    <img :src="data[0].img" alt="">
                </div>
                <div id="main">
                    <div class="ss">吸顶</div>
                    <dl v-for="item in data[0].children" :key="item.id">
                        <dt>
                            <img :src="item.img" alt="">
                        </dt>
                        <dd>
                            <h4>{{item.name}}</h4>
                            <p>{{item.title}}</p>
                            <span>￥{{item.price}}</span>
                        </dd>
                    </dl>
                </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            data:[]
        }
    },
    created() {
        axios.get('/list').then(res=>{
            this.data = res.data
        })
    },
    mounted()  {
        let titleTop = ss.offsetTop;
        //滚动事件
        document.onscroll = function(){
                //获取当前滚动的距离
                let btop = document.body.scrollTop||document.documentElement.scrollTop;
                //如果滚动距离大于导航条据顶部的距离
                if(titleTop - btop < 60){
                        //为导航条设置fix
                        tit.class = "fix"; //这里根据不同的类名设置不同的样式
                     }else if (titleTop - btop > 60) {
                        //移除fixed
                        tit.class = "";
                     }
             }
    },
}
</script>

<style lang="scss">
.home{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    #head{
        height: 150px;
    }
    #main{
        flex: 1;
        .ss{
            height: 50px;
            background: red;
            position: static;
        }
    }
}

</style>